<template>
	<view class="content">
		<view class="tabsBg">
			<u-tabs-swiper :font-size="24" :active-item-style="{fontSize:'28rpx'}" bg-color="#F6F8F6" :bar-height="14"
				inactive-color="#000" :duration="0.2" :bar-style="{background:'#F7DD5E'}" active-color="#000" bold ref="uTabs"
				:list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"
				:bar-width="80"></u-tabs-swiper>
		</view>
		<swiper disable-touch :style="'height:'+swiperH + 'px;'" :duration="200" :current="swiperCurrent"
			@transition="transition" @animationfinish="animationfinish">
			<!-- 基本信息 -->
			<swiper-item class="swiper-item">
				<scroll-view :style="'height:'+swiperH + 'px;'" scroll-y>
					<view>
						<basic :info="info" />
						<!-- 占位 -->
						<view :style="[safeAreaB]" class="bg-white"></view>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 最新调剂信息 -->
			<swiper-item class="swiper-item">
				<scroll-view :style="'height:'+swiperH + 'px;'" scroll-y class="bg-white" @scrolltolower="newsTolower">
					<view class="u-p-l-40 u-p-r-40 u-p-t-20">
						<news ref="news" :schoolCode="info.schoolCode" />
					</view>
					<view :style="[safeAreaB]" class="bg-white"></view>
				</scroll-view>
			</swiper-item>
			<!-- 往年调剂情况 -->
			<swiper-item class="swiper-item">
				<scroll-view scroll-y :style="'height:'+swiperH + 'px;'" class="bg-white">
					<view class="u-p-l-40 u-p-r-40">
						<adjustDetail ref="adjustDetail" :schoolCode="info.schoolCode" :collegeCode="info.collegeCode"
							:majorCode="info.majorCode">
						</adjustDetail>
					</view>
					<view :style="[safeAreaB]" class="bg-white"></view>
				</scroll-view>
			</swiper-item>
			<!-- 往年调剂名单 -->
			<swiper-item class="swiper-item">
				<scroll-view scroll-y :style="'height:'+swiperH + 'px;'" class="bg-white" @scrolltolower="adjustSourceTolower">
					<view class="u-p-l-30 u-p-r-30 u-p-t-40">
						<view>
							<adjustSource :collegeCode="info.collegeCode" :schoolCode="info.schoolCode" :majorCode="info.majorCode" ref="adjustSource"></adjustSource>
						</view>
					</view>
					<view :style="[safeAreaB]" class="bg-white"></view>
				</scroll-view>
			</swiper-item>
			<!-- 同校去向名单 -->
			<swiper-item class="swiper-item">
				<scroll-view scroll-y :style="'height:'+swiperH + 'px;'" class="bg-white" @scrolltolower="adjustGoTolower">
					<view class="u-p-l-30 u-p-r-30 u-p-t-20">
						<adjustGo :schoolCode="info.schoolCode" :majorCode="info.majorCode" ref="adjustGo"></adjustGo>
					</view>
					<view :style="[safeAreaB]" class="bg-white"></view>
				</scroll-view>
			</swiper-item>
			<!-- 学校信息 -->
			<swiper-item class="swiper-item">
				<scroll-view :style="'height:'+swiperH + 'px;'" scroll-y>
					<view>
						<school-info ref="schoolInfo" :code="info.schoolCode" />
						<!-- 占位 -->
						<view :style="[safeAreaB]" class="bg-white"></view>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 就业形式 -->
			<swiper-item class="swiper-item">
				<scroll-view :style="'height:'+swiperH + 'px;'" scroll-y>
					<view>
						<get-job :title="info.school" ref="getJob" />
						<!-- 占位 -->
						<view :style="[safeAreaB]" class="bg-white"></view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import wybTable from '../../components/wyb-table/wyb-table.vue'
	import adjustSource from '../../components/adjustSource/index.vue'
	import adjustGo from '../../components/adjustGo/index.vue'
	import adjustDetail from '../../components/adjustDetail/index.vue'
	import news from '../../components/news/news.vue'
	import basic from '../../components/basic/basic.vue'
	import schoolInfo from '../../components/schoolInfo/schoolInfo.vue'
	import getJob from '../../components/getJob/getJob.vue'
	import {
		querySchoolDtail,
	} from '@/api/toolbox.js';
	export default {
		components: {
			wybTable,
			adjustSource,
			adjustGo,
			adjustDetail,
			news,
			basic,
			schoolInfo,
			getJob
		},
		data() {
			return {
				swiperH: 0,
				list: [{
					name: "基本信息",
					load: true
				}, {
					name: '最新调剂信息',
					load: false
				}, {
					name: '往年调剂情况',
					load: false
				}, {
					name: '往年调剂名单',
					load: false
				}, {
					name: '同校去向',
					load: false
				}, {
					name: '大学概况',
					load: false
				}, {
					name: '就业形式',
					load: false
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				info: {},
			}
		},
		onLoad(e) {
			this.swiperH = this.$u.sys().windowHeight - uni.upx2px(90);
			if (e.items) {
				this.info = JSON.parse(e.items);
				uni.setNavigationBarTitle({
					title: this.info.school + '调剂详情页'
				})
			} else {
				uni.showToast({
					title: '参数异常，请重新进入页面！',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack(1);
				}, 1500)
			}
		},
		watch: {
			swiperCurrent(newV) {
				if (!this.list[newV].load) {
					switch (newV) {
						case 1:
							this.$refs.news.getNews();
							break;
						case 2:
							this.$refs.adjustDetail.getAdjustYearInfoData();
							break;
						case 3:
							this.$refs.adjustSource.getAdjustSourceListData();
							break;
						case 4:
							this.$refs.adjustGo.getAdjustGoListData();
							break;
						case 5:
							this.$refs.schoolInfo.getData();
							break;
						case 6:
							this.$refs.getJob.getData();
							break;
					}
					this.list[newV].load = true;
				}
			}
		},
		computed: {
			safeAreaB() {
				let style = {};
				style.height = (this.$u.sys().safeAreaInsets.bottom + 10) + 'px';
				return style;
			}
		},
		methods: {
			newsTolower() {
				this.$nextTick(() => {
					this.$refs.news.reachBottom();
				})
			},
			adjustSourceTolower() {
				this.$nextTick(() => {
					this.$refs.adjustSource.reachBottom();
				})
			},
			adjustGoTolower() {
				this.$nextTick(() => {
					this.$refs.adjustGo.reachBottom();
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
		}
	}
</script>

<style scoped lang="scss">
	.tips {
		background-color: #FFFFDD;
		color: #333333;
		font-size: 24rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		padding-left: 25rpx;
		padding-right: 25rpx;
		border-radius: 12rpx;
		font-weight: 600;
	}

	.bookDesc {
		line-height: 2;
		text-indent: 1.5rem;
	}

	.h-80-border-bottom {
		border-bottom: 2rpx solid #F6F8F6;
	}

	.h-80 {
		height: 80rpx;
	}

	.content {
		background-color: #F6F8F6;
	}

	.tabsBg {
		padding-bottom: 6rpx;
	}

	.newsItem {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.tags {
		margin-top: 20rpx;
		width: 16rpx;
		height: 16rpx;
		background-color: #D0E17D;
		border-radius: 100rpx;
		margin-right: 12rpx;
	}

	.line {
		margin: 0 30rpx;
	}

	.title {
		font-weight: bolder;
		font-size: 30rpx;
	}

	.desc {
		color: #969699;
		font-size: 26rpx;
	}


	/deep/ uni-swiper .uni-swiper-wrapper {
		overflow-x: auto !important;
	}

	/deep/ uni-swiper-item {
		overflow-x: auto !important;
	}

	.color555 {
		color: #555555;
	}

	.schoolContent {
		border-radius: 16rpx 16rpx 0 0;
		margin-top: -30rpx;
		z-index: 10;
		position: relative;

		.k_sign {
			display: flex;
			justify-content: center;
			text-align: center;
			font-size: 24rpx;
			/* margin-top: 30rpx; */
			padding-top: 20rpx;
			padding-bottom: 40rpx;
			background-color: #fff;
			align-items: center;
			border-radius: 0 0 50rpx 50rpx;
		}

		.s_dashed {
			background: #fff;
			margin: 0px 10rpx;
			min-width: 192rpx;
			width: auto;
		}

		.s_t {
			margin-top: 4rpx;
			color: #DDDDDD;
			padding: 10rpx;
			border-radius: 20rpx 20rpx 0 0;
			font-size: 22rpx;
			font-style: italic;
			text-align: left;
		}

		.title-box-style {
			padding: 0 10rpx 0 0;
			margin-left: -11px;
			margin-top: -10px;
			height: 46rpx;
			// font-weight: 400;
			font-style: italic;
			font-size: 24rpx;
			// width: 106rpx;
			width: 130rpx;
			min-width: 106rpx;
			border-radius: 30rpx;
			border-top-left-radius: 0px;
			border-bottom-left-radius: 0px;
			line-height: 38rpx;
			// border:none;
			// display: inline-block;
			position: relative;

			image {
				mix-blend-mode: multiply;
				// min-width: 106rpx;
				width: 100%;
				height: 46rpx;
				position: absolute;
			}
		}

		.k_sinum {
			display: inline-flex;
			font-size: 22rpx;
			font-weight: 400;
			// letter-spacing: 2px;
		}

		.s_dashed-last {
			margin: 0px 10rpx 0 0;
		}
	}
</style>